<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/common.css">
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/list.css">
    <!--图片样式-->
</head>
<body>
<div class="menu">
    <div class="container">
        <div class="logo">
            <a href="/">
                <img src="../img/logo.png" alt="">
            </a>
        </div>
        <ul>
            <h2>中纺机集团三十周年</h2>
            <li><a href="#">专题首页</a></li>
            <li><a href="#">迎庆30年</a></li>
            <li><a href="#02">30年征文 </a></li>
            <li><a href="#03">30年演讲赛</a></li>
            <li><a href="#04">30年摄影展</a></li>
        </ul>
    </div>
    <div class="menu2"></div>
</div>
<!--30年摄影展-->
<div class="photoAlbum">
    <div class="container">
        <div class="photoTitle">
            30年摄影展
        </div>
        <div class="photoItem">
            <a  class="photoList">
                <img src="../img/listItem1.jpg" alt="">
                <div class="photoItemCon">
                    <p class="photoItemTitle">中纺机集团三十周年摄影大赛</p>
                    <p class="photoItemDate">
                        <span>总时长：5分25秒</span>
                        <span class="photoItemCount">播放量：1000 </span>
                    </p>
                </div>
            </a>
            <a  class="photoList">
                <img src="../img/listItem1.jpg" alt="">
                <div class="photoItemCon">
                    <p class="photoItemTitle">中纺机集团三十周年摄影大赛</p>
                    <p class="photoItemDate">
                        <span>总时长：5分25秒</span>
                        <span class="photoItemCount">播放量：1000 </span>
                    </p>
                </div>
            </a>
            <a  class="photoList">
                <img src="../img/listItem1.jpg" alt="">
                <div class="photoItemCon">
                    <p class="photoItemTitle">中纺机集团三十周年摄影大赛</p>
                    <p class="photoItemDate">
                        <span>总时长：5分25秒</span>
                        <span class="photoItemCount">播放量：1000 </span>
                    </p>
                </div>
            </a>
            <a  class="photoList">
            <img src="../img/listItem1.jpg" alt="">
            <div class="photoItemCon">
                <p class="photoItemTitle">中纺机集团三十周年摄影大赛</p>
                <p class="photoItemDate">
                    <span>总时长：5分25秒</span>
                    <span class="photoItemCount">播放量：1000 </span>
                </p>
            </div>
        </a>
            <a  class="photoList">
            <img src="../img/listItem1.jpg" alt="">
            <div class="photoItemCon">
                <p class="photoItemTitle">中纺机集团三十周年摄影大赛</p>
                <p class="photoItemDate">
                    <span>总时长：5分25秒</span>
                    <span class="photoItemCount">播放量：1000 </span>
                </p>
            </div>
        </a>
            <a class="photoList">
                <img src="../img/listItem1.jpg" alt="">
                <div class="photoItemCon">
                    <p class="photoItemTitle">中纺机集团三十周年摄影大赛</p>
                    <p class="photoItemDate">
                        <span>总时长：5分25秒</span>
                        <span class="photoItemCount">播放量：1000 </span>
                    </p>
                </div>
            </a>
        </div>
        <div class="pageBtn">
            <a href="" class="firstPage">
                <span>首页</span>
            </a>
            <a href="" class="prevPage">
                <span>上一页</span>
            </a>
            <a href="" class="num active">
                <span>1</span>
            </a>
            <a href="" class="num">
             <span>2</span>
             </a>
            <a href="" class="num">
                <span>3</span>
            </a>
            <a href="" class="next">
                <span>下一页</span>
            </a>
            <a href="" class="endPage">
                <span>尾页</span>
            </a>
        </div>
    </div>
</div>
<!--player-->
<div class="hidePlayer">
    <div class="hideContent">
        <div class="hideTitle">
          <cite> ×</cite>
        </div>
        <div class="playerControl">
            <video id="video"
                   autoplay
                   controls
            >
                <source src="../video/01.mp4" type="video/mp4">
            </video>
        </div>
    </div>

</div>
<div class="bottom">
    <div class="bottom-cn"> <p>©Copyright 2016 中国纺织机械（集团）有限公司  |  京ICP备05014370号 </p> <ul> <li class="phone">
        <a href="#">微信关注</a>
        <div class="wenxin"><img src="../img/wx.jpg" width="120" height="120"></div> </li> <span> | </span>
        <li><a href="#">ENGLISH</a></li> </ul>
    </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
<script>
    $('.photoItem .photoList').click(function () {
        $('.hidePlayer').fadeIn()
    })
    $('.hideTitle cite').click(function () {
        $('.hidePlayer').fadeOut(100)
        $('#video').get(0).pause()
    })
</script>
</body>
</html>